<script>
init({
  title: 'Loading Template',
  desc: 'Use `loadingTemplate` option to custom the loading type.',
  links: [
    'https://cdn.jsdelivr.net/npm/placeholder-loading@0.6.0/dist/css/placeholder-loading.min.css',
    'bootstrap-table.min.css'
  ],
  scripts: ['bootstrap-table.min.js']
})
</script>

<script>
  let type = 'fa'

  window.loadingTemplate = () => {
    if (type === 'fa') {
      return '<i class="fa fa-spinner fa-spin fa-fw fa-2x"></i>'
    }
    if (type === 'pl') {
      return '<div class="ph-item"><div class="ph-picture"></div></div>'
    }
  }

  function rebuild () {
    $('#table').bootstrapTable('destroy')
      .bootstrapTable()
      .bootstrapTable('showLoading')
  }

  function mounted () {
    $('#type').change(function () {
      type = $(this).val()
      rebuild()
    })
    rebuild()
  }
</script>

<template>
  <div
    id="toolbar"
    class="select"
  >
    <select
      id="type"
      class="form-control"
    >
      <option value="fa">
        Font Awesome Loading
      </option>
      <option value="pl">
        Placeholder Loading
      </option>
    </select>
  </div>

  <table
    id="table"
    data-toggle="table"
    data-height="460"
    data-toolbar="#toolbar"
    data-loading-template="loadingTemplate"
  >
    <thead>
      <tr>
        <th
          data-field="id"
          data-sortable="true"
        >
          ID
        </th>
        <th
          data-field="name"
          data-sortable="true"
        >
          Item Name
        </th>
        <th
          data-field="price"
          data-sortable="true"
        >
          Item Price
        </th>
      </tr>
    </thead>
  </table>
</template>

<style>
  .ph-item,
  .ph-picture {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
</style>
